<template>
	<scroll-view scroll-y class="submit-order">
		<view class="content">
			<view class="address" @click="goAddress">
				<view v-if="!address.linkman" class="icon-btn">
					<view class="iconfont icon-add"></view>
					<view class="">添加收货地址</view>
				</view>
				<view v-else class="list-item">
					<view class="padding-r24">
						<view class="area">{{address.province}}{{address.city}}{{address.area}}</view>
						<view class="detail">{{address.address}}</view>
						<view class="flex align-center" style="gap: 16rpx;">
							<view class="name">{{address.linkman}}</view>
							<view class="phone">{{address.phone}}</view>
						</view>
					</view>
					<view class="iconfont icon-chevron-left"></view>
				</view>
			</view>
			
			<view class="card">
				<view class="title">代理商申请信息</view>
				<view class="info-list">
					<view class="info-item"><view class="flex-shrink">姓名：</view>{{formInfo.linkman}}</view>
					<view class="info-item"><view class="flex-shrink">手机号：</view>{{formInfo.phone}}</view>
					<view class="info-item"><view class="flex-shrink">代理区域：</view>{{formInfo.province}}{{formInfo.city}}{{formInfo.area}}</view>
					<view class="info-item"><view class="flex-shrink">学校名称：</view>{{formInfo.name}}</view>
					<view class="info-item"><view class="flex-shrink">学校地址：</view>{{formInfo.address}}</view>
					<view class="info-item"><view class="flex-shrink">支付金额：</view>{{productInfo.pay_deposit_fee | formatPrice($formatPrice)}}元</view>
					<view class="info-item" style="display: block;">
						<view class="flex-shrink">身份证：</view>
						<view class="ID-card-images">
							<view class="card-item" v-for="(item, index) in formInfo.identity_card_data" :key="index" @click="handlePreviewImage(formInfo.identity_card_data, index)">
								<image :src="item.url" mode="aspectFit"></image>
							</view>
						</view>
					</view>
					<view class="info-item" style="display: block;">
						<view class="flex-shrink">学生证：</view>
						<view class="card-images">
							<view class="item-img" v-for="(item, index) in formInfo.student_card_data" :key="index" @click="handlePreviewImage(formInfo.student_card_data, index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="info-item" style="display: block;">
						<view class="flex-shrink">资金证明：</view>
						<view class="card-images">
							<view class="item-img" v-for="(item, index) in formInfo.asset_certificate_data" :key="index" @click="handlePreviewImage(formInfo.asset_certificate_data, index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<!-- <view v-if="formInfo.credit_report_data && formInfo.credit_report_data.length" class="info-item" style="display: block;">
						<view class="flex-shrink">征信报告：</view>
						<view class="card-images">
							<view class="item-img" v-for="(item, index) in formInfo.credit_report_data" :key="index" @click="handlePreviewImage(formInfo.credit_report_data, index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
					</view> -->
					<view class="info-item" style="display: block;" v-if="formInfo.is_club_card">
						<view class="flex-shrink">社团图片：</view>
						<view class="card-images">
							<view class="item-img" v-for="(item, index) in formInfo.club_card_data" :key="index" @click="handlePreviewImage(formInfo.club_card_data, index)">
								<image :src="item.url" mode="aspectFill"></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- <button class="item-btn" @click="$emit('back', 2)">重新修改</button> -->
			</view>
			
			
			<view class="card">
				<view class="title">选购产品清单</view>
				
				<view class="product-lists">
					<view class="product-item" v-for="item in productInfo.cart" :key="item.gid">
						<view class="info-list">
							<view class="info-item">产品名称：{{item.product_title}}</view>
							<view class="info-item">数量：{{item.quantity}}台</view>
							<view v-if="item.relation" class="info-item">服务：
								<text v-for="(relation, idx) in item.relation" :key="idx">{{relation.product_title}}{{idx < item.relation.length-1 ? '、' : ''}}</text>
							</view>
							<view class="info-item">金额：{{item.total_price | formatPrice($formatPrice)}}元</view>
						</view>
						<view class="item-img">
							<image :src="item.product_thumb" mode="aspectFill"></image>
						</view>
					</view>
				</view>
				
				<view style="padding-top: 36rpx;">
					<view class="flex align-center justify-end">
						<view class="total">
							<text class="total-title">合计</text>
							<text>(含运费)：</text>
						</view>
						<view class="total-price">
							<text class="price-unit">￥</text>
							<text>{{productInfo.pay_total_fee | formatPrice($formatPrice, '')}}元</text>
						</view>
					</view>
					<view class="flex align-center justify-end" style="padding-top: 14rpx;">
						<view class="preferential">
							<text>需支付订金：</text>
						</view>
						<view class="total-price detial-btn">
							<text class="price-unit">¥</text>
							<text>{{productInfo.pay_deposit_fee | formatPrice($formatPrice, '')}}元</text>
						</view>
					</view>
					<view v-if="productInfo.parcel_fee" class="flex align-center justify-end" style="padding-top: 14rpx;">
						<view class="preferential">
							<text>需付快递费：</text>
						</view>
						<view class="total-price detial-btn">
							<text class="price-unit">¥</text>
							<text>{{productInfo.parcel_fee | formatPrice($formatPrice, '')}}元</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="card">
				<view class="form-item">
					<view class="form-label">备注说明</view>
					<view class="form-body">
						<view class="textarea">
							<textarea v-model="params.remark" placeholder="请输入备注说明" placeholder-class="placeholder-class"></textarea>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer-btns">
			<button class="cancel" @click="back">上一步</button>
			<button class="confirm" @click="next">确认提交并支付</button>
		</view>
	</scroll-view>
</template>

<script>
	import formatPrice from '@/mixins/formatPrice.js';
	import { previewImage } from '@/utils/uploadImg.js'
	
	export default {
		name: 'submit-order',
		props: {
			cartIds: Array
		},
		mixins:[formatPrice],
		data() {
			return {
				// cartIds: '',
				formInfo: {},
				productInfo: {},
				params: {
					arr_cart_gid: '', // string 必需 购物车信息GID组，多个GID逗号分隔 示例值: 4e31f2ff-1635-4397-8bb7-a7daeb2cc131
					address_gid: '', // string  收件人地址GID 必需 示例值: 04a268c0-2924-4ea3-b18b-c1e0a1db2bef
					pay_total_fee: '', // number  必需 订单总金额：商品合计+快递费 示例值: 12064
					remark: '', // string 可选 备注（200个字内）
				},
				address: {}
			}
		},
		watch: {
			cartIds(val) {
				this.params.arr_cart_gid = this.cartIds.join(',');
				this.getData()
			}
		},
		mounted() {
			if (this.cartIds) {
				this.params.arr_cart_gid = this.cartIds.join(',');
				this.getData()
			}
			uni.$on('changeAddress', (val)=> {
				this.params.address_gid = val.gid
				this.address = val
			})
		},
		methods: {
			// 预览图片
			handlePreviewImage(lists, index) {
				const list = lists.map(item=> item.url)
				previewImage(list, index)
			},
			// 前往地址
			goAddress() {
				uni.navigateTo({
					url: '/pages/address/address?type=select'
				})
			},
			// 获取数据
			getData() {
				this.getAgentOrderInfo()
				this.agentGetHistoryInfo()
			},
			getAgentOrderInfo() {
				const arr_cart_gid = this.cartIds.join(',');
				this.$api.agentOrderConfirmApi({arr_cart_gid}).then(res=> {
					this.productInfo = res.data
					this.params.pay_total_fee = this.productInfo.pay_total_fee
					if (res.data.user_address) {
						this.params.address_gid = res.data.user_address.gid
						this.address = res.data.user_address
					}
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 获取历史信息
			agentGetHistoryInfo() {
				this.$api.agentGetHistoryInfoApi().then(res=> {
					this.formInfo = {
						...res.data,
						identity_card_data: res.data.identity_card_data ? res.data.identity_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 身份证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						student_card_data: res.data.student_card_data ? res.data.student_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 学生证图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						asset_certificate_data: res.data.asset_certificate_data ? res.data.asset_certificate_data.split(',').map(item=> ({url: item})) : [], // string  可选 资产证明图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						credit_report_data: res.data.credit_report_data ? res.data.credit_report_data.split(',').map(item=> ({url: item})) : [], // string  可选 征信报告图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
						club_card_data: res.data.club_card_data ? res.data.club_card_data.split(',').map(item=> ({url: item})) : [], // string  可选 社团图片，多个逗号分隔“,”，可调用“文件上传”上传文件至云服务器
					}
				}).catch(err=> {
					console.log('err', err);
				})
			},
			back() {
				this.$emit('back')
			},
			next() {
				if (!this.params.address_gid) {
					uni.showToast({
						icon: 'none',
						title: '请选择收货地址'
					})
					return
				}
				this.$api.agentOrderCreateApi(this.params).then(res=> {
					// this.$emit('next', this.formData)
					this.agentPayCreate(res.data.gid, res.data.unpaid_fee)
					// this.getOrderInfo(res.data.gid)
				}).catch(err=> {
					console.log('err', err);
				})
			},
			getOrderInfo(gid) {
				this.$api.agentOrderDetailsApi(gid).then(res=> {
					this.agentPayCreate(gid, res.data.unpaid_fee)
				}).catch(err=> {
					console.log();
				})
			},
			async agentPayCreate(gid, unpaid_fee) {
				const { code } = await uni.login()
				const params = {
					appid: this.$store.state.common.appid, // string 必需 微信小程序appid
					order_gid: gid, // string 订单gid 必需 示例值: 71e3f23b-b20d-4877-b32a-b2fd23a7ddc8
					code: code, // string  必需 wx.login中的code
					order_price: unpaid_fee, // number 订单支付金额 必需 示例值: 1332
				}
				this.$api.agentPayCreateApi(params).then(res=> {
					uni.showLoading({
						title: '支付中···'
					})
					uni.requestPayment({
					    provider: "wxpay",
					    orderInfo: {},
						...res.data,
					    success: (res)=> {
							uni.hideLoading()
							this.$emit('success', gid)
						},
					    fail: (err)=> {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
							this.$emit('fail', gid, unpaid_fee)
						}
					})
				}).catch(err=> {
					console.log('err', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.submit-order {
		flex: 1;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		
		.content {
			padding: 0 32rpx;
			box-sizing: border-box;
			padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		}
		
		.address {
			min-height: 214rpx;
			padding: 40rpx;
			margin-bottom: 32rpx;
			border-radius: 26rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			
			.icon-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 28rpx;
				height: 134rpx;
				
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
				
				.icon-add {
					font-size: 30rpx;
				}
			}
			
			.list-item {
				position: relative;
				overflow: hidden;
				background-color: #FFFFFF;
				box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.02);
				
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			
			.label {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 9;
				border-radius: 6rpx;
				padding: 4rpx 16rpx;
				background-color: #E3F9E9;
				
				font-size: 24rpx;
				font-weight: 400;
				line-height: 40rpx;
				text-align: center;
				color: #2BA471;
			}
			
			.area {
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: 400;
				line-height: 18.2px;
				text-align: left;
				color: rgba(0, 0, 0, 0.7);
				padding-bottom: 14rpx;
			}
			
			.detail {
				font-size: 34rpx;
				font-weight: 400;
				line-height: 46rpx;
				text-align: left;
				color: #000000;
				padding-bottom: 14rpx;
			}
			
			.name {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: left;
				color: #000000;
			}
			
			.phone {
				font-size: 26rpx;
				font-weight: 400;
				line-height: 36rpx;
				text-align: left;
				color: #000000;
			}
			
			.icon-edit-1 {
				color: #000000;
				font-size: 32rpx;
				position: relative;
				z-index: 9;
				
				&::after {
					position: absolute;
					content: '';
					top: 14rpx;
					left: 4rpx;
					z-index: -1;
					width: 70%;
					height: 8rpx;
					transform: rotate(-45deg);
					background-color: #A5A4B4;
				}
			}
		}
		
		.card {
			padding: 38rpx 32rpx;
			border-radius: 16rpx;
			margin-bottom: 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			
			.title {
				color: #000000;
				font-size: 34rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}
			
			
			.info-list {
				gap: 16rpx;
				display: flex;
				padding-top: 36rpx;
				padding-bottom: 38rpx;
				flex-direction: column;
			}
			
			.info-item {
				color: #999999;
				font-size: 26rpx;
				text-align: left;
				font-weight: 400;
				line-height: 36rpx;
				
				display: flex;
				// align-items: center;
			}
			
			.ID-card-images {
				gap: 20rpx;
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				// display: flex;
				// align-items: center;
				padding-top: 24rpx;
				padding-bottom: 8rpx;
				
				.card-item {
					flex: 1;
					height: 160rpx;
					overflow: hidden;
					border-radius: 12rpx;
					background-color: #F6F6F6;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.card-images {
				gap: 20rpx;
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				padding-top: 24rpx;
				padding-bottom: 8rpx;
				
				.item-img {
					width: 160rpx;
					height: 160rpx;
					overflow: hidden;
					border-radius: 12rpx;
					background-color: #F6F6F6;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
			
			.item-btn {
				padding: 0;
				margin: 0;
				height: 62rpx;
				border-radius: 26rpx;
				background: var(--gradient-color-vertical);
				
				display: flex;
				align-items: center;
				justify-content: center;
				
				&::after {
					border: none;
				}
				
				color: #FFFFFF;
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
			}
		
		
			.product-lists {
				
				.product-item {
					display: flex;
					align-items: center;
					padding-top: 36rpx;
					padding-bottom: 36rpx;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;
				}
				
				.info-list {
					padding: 0;
				}
				
				.item-img {
					width: 154rpx;
					height: 154rpx;
					overflow: hidden;
					border-radius: 12rpx;
					background-color: #F6F6F6;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
			}
		
			
			.total {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 28rpx;
				text-align: left;
				color: rgba(0, 0, 0, 0.4);
			}
			
			.total-title {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
				color: #000000;
			}
			
			.total-price {
				font-size: 34rpx;
				font-weight: 700;
				line-height: 38rpx;
				text-align: left;
				color: #000000;
			}
			
			.price-unit {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 28rpx;
				text-align: left;
			}
			
			.preferential {
				font-size: 28rpx;
				font-weight: 400;
				line-height: 38rpx;
				text-align: left;
				color: rgba(0, 0, 0, 1);
			}
			
			.detial-btn {
				color: #FF754C;
			}
		}
		
		.form-item {
			padding-bottom: 32rpx;
				
			&:last-child {
				padding-bottom: 0;
			}
		}
				
		.form-label {
			font-size: 28rpx;
			font-weight: 400;
			text-align: left;
			line-height: 44rpx;
			padding-bottom: 16rpx;
			color: rgba(0, 0, 0, 0.9);
		}
				
		.form-body {
			padding-bottom: 12rpx;
		}
		
		.textarea {
			height: 168rpx;
			padding: 14rpx 16rpx;
			border-radius: 12rpx;
			box-sizing: border-box;
			border: 1px solid #DCDCDC;
		
			textarea {
				width: 100%;
				height: 100%;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 48rpx;
				text-align: left;
			}
		}
		
		.footer-btns {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			z-index: 999;
			padding: 20rpx 32rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			box-shadow: 0px 0px 33rpx rgba(0, 0, 0, 0.05);
			padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
			padding-bottom: calc(20rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
			gap: 14rpx;
			display: flex;
			align-items: center;
		
			.cancel {
				width: 178rpx;
				height: 82rpx;
				border: 1px solid var(--primary-color);
		
				color: var(--primary-color);
				font-size: 34rpx;
				font-weight: 400;
				line-height: 82rpx;
				text-align: center;
			}
		
			.confirm {
				flex: 1;
				height: 82rpx;
				border: 1px solid var(--gradient-color-vertical);
				background: var(--gradient-color-vertical);
		
				font-size: 34rpx;
				font-weight: 400;
				line-height: 82rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>